<template>
  <div class="pageMainDash">
    <!-- <div class="dashboard-container">说明</div>
    <div v-hasPermi="[1]">11111</div>
    <div @click="onClick">dffff</div>
    <Cesium ref="cesiumRef" /> -->
    <div class="leftBox">
        <Defect/>
        <Asstes style="margin-top: 13px" />
    </div>
    <Middle />
    <div class="rightBox">
        <Alarm/>
        <Notice style="margin-top: 13px" />
    </div>
  </div>
</template>

<script setup name="Dashboard">
import { useBtnPermiStore } from '@/store/buttonPermi'
import { onMounted, ref } from 'vue'
import Middle from '@/components/HRDashboard/middle.vue'
import Asstes from '@/components/HRDashboard/assetsCom.vue'
import Defect from '@/components/HRDashboard/defect.vue'
import Alarm from '@/components/HRDashboard/alarmCom.vue'
import Notice from '@/components/HRDashboard/noticeCom.vue'

onMounted(() => {
  // console.log(111, cesiumRef.value)
})

const cesiumRef = ref(null)

const btnPermiStore = useBtnPermiStore()
btnPermiStore.test()
console.log(btnPermiStore.btnPermis)

const onClick = () => {
  btnPermiStore.changeValue()
  console.log(btnPermiStore.btnPermis)
}
</script>

<style lang="scss">
.dashboard-container {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
}
.pageMainDash {
  display: flex;
  background-color: #080c1b;
  // padding: 12px;
  // box-sizing: border-box;
}
.leftBox {
  display: flex;
  flex-direction: column;
  margin-right: 12px;
}
.rightBox {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
}

</style>
